Frogger
Desarrollo | Diseño UI/UX
El videojuego Frogger es un clásico de los 80', consiste en hacer cruzar a una rana por una calle circulada por vehículos, luego hacerla saltar entre troncos por un río hasta llegar del otro lado. Para la materia Sistemas Operativos de la carrera Ingeniería en Informática de la Universidad Nacional de la Matanza, se nos pidió realizar nuestra propia versión de este popular juego. El mismo debía estar programado en C o C++ y ofrecer la posibilidad de jugar en red a través de varias computadoras, para realizar un torneo en simultáneo.

En esta versión sin fines de lucro podíamos usar todo elemento gráfico que encontremos a nuestra disposición ya que el foco estaba en la programación y la arquitectura de la interacción cliente-servidor. Aún así, fue mi deseo que la estética sea una mas moderna que la del juego original, acercándose a los gráficos 16 bits de los 90'. Para ello realicé una búsqueda de material de distintas fuentes hasta hallar sprites que me permitieran crear el escenario con la claridad necesaria para que el usuario tenga una mejor experiencia al jugarlo.
Assets
Elementos y fondo
El fondo se fue construyendo con árboles, tierra, agua, calle y pasto. Fui buscando la proporción de los terrenos para demarcar las diferentes áreas del juego:

Porción negra: Lugar designado para los elementos del HUD donde se le muestran al  usuario información como el tiempo restante y la cantidad de vidas.
Pasto: Zonas seguras tanto al comienzo de la pantalla como después del asfalto para  que el usuario pueda familiarizarse con los controles sin el estrés de correr riesgo.
Calle: Lugar por donde pasan autos en distintos carriles a diferentes velocidades y por  donde el jugador tiene que cruzar rápidamente sin ser alcanzado por ninguno.
Agua: A diferencia de la calle donde todo el terreno es seguro salvo donde pasan los autos, aquí la rana pierde una vida si cae en el agua, y deberá saltar entre troncos para poder continuar avanzando.
Muelle: Objetivo final del juego, a donde debe llegar al rana antes que su contrincante para ganar. La zona se encuentra rodeada de piedras bloqueantes por lo que el jugador deberá calcular bien el salto para llegar a las distintas plataformas.

A continuación se puede observar como la creación de la pantalla fue evolucionando agregando cada vez mas detalles como sombras en el agua y arena en la orilla:
Animaciones
Aquí podemos ver algunos de los elementos usados para representar a la rana y a los vehículos. Fue importante armar distintos frames con las diferentes posiciones en las que puede estar posicionado cada elemento, así como realizar las posiciones de espera y salto para la rana. Al mover al personaje se puede ver una animación de salto que facilita saber en que posición quedara después de cada movimiento.

Menú
Para el menú se optó por un tinte cómico representado con clásicos como la Rana René (Kermit the frog) en difrentes posiciones dependiendo del momento en el que se encuentre el jugador.

Lo importante de esta tarea mas allá de las imágenes, fue tener que diseñar el flujo de la información, y pensar en qué estados posibles podía encontrarse la partida o el usuario.

Se realizaron:
* Pantallas de espera
* Pantallas de victoria y derrota de partida
* Pantallas de victoria y derrota de torneo
* Pantallas de configuración del juego
* Pantallas de posiciones en el torneo
* Pantalla de menú principal
* Pantallas de errores y notificaciones

Aquí tenemos algunos ejemplos:

Packaging
En la entrega final del producto el juego se grabó en un CD y se creó una caja acorde que represente los elementos principales: Una screenshot del juego funcionando, la idea de que se puede jugar en modo torneo con otras personas, y que existen diferentes formas de interactuar con el mismo tanto con el mouse como con el teclado.
D-FROGGER TOURNAMENT 2012- SISTEMAS OPERATIVOS --- Ávila García, Ezequiel - Coudures Zenz, Kevin - García Eilert, Christian - Gonzales, Damián - Muñoz, Marcos
Frogger
Published:

Frogger

Video juego creado para la materia Sistemas Operativos utilizando la biblioteca SDL y diseñado con Photoshop

Published: